<template>
  <vxe-input
    class="ea-input-number"
    :value="value"
    :placeholder="placeholder"
    :type="typeCom"
    clearable
    :min="min"
    :max="max"
    :step="step"
    :size="size"
    :digits="precision"
    :disabled="disabled"
    style="max-width: 100%"
    @change="handleValueChange"
    @blur="handleBlur"
    @clear="handleClear"
  />
</template>

<script>
/**
 * @Author      : maolin
 * @Date        : 2021/3/24
 * @Version     : 1.0
 * @Description :
 **/
import Vue from 'vue';
import {Input} from "vxe-table";
Vue.use(Input);
/**
 *
 * @author maolin
 */
export default {
  name: "EaInputNumber",
  components: {},
  model: {
    prop: 'value',
    event: 'value-change'
  },
  props: {
    step: {
      type: Number,
      default: 1
    },
    stepStrictly: {
      type: Boolean,
      default: false
    },
    max: {
      type: Number,
      default: Infinity
    },
    min: {
      type: Number,
      default: -Infinity
    },
    value: {
      type: [String, Number],
      default: ''
    },
    disabled: Boolean,
    controls: {
      type: Boolean,
      default: true
    },
    controlsPosition: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    precision: {
      type: Number,
      default: 0,
      validator(val) {
        return val >= 0 && val === parseInt(val, 10);
      }
    }
  },
  data() {
    return {
      currentValue: ''
    };
  },
  computed: {
    typeCom () {
      if (this.precision === 0) {
        return 'integer';
      }
      return 'float';
    },
    size () {
      return this.$store.getters.size;
    }
  },
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    handleValueChange (e) {
      this.emitValue(e.value);
    },
    handleBlur (e) {
      this.emitValue(e.value);
    },
    handleClear (e) {
      this.emitValue(e.value);
    },
    emitValue (value) {
      if (this.currentValue !== value) {
        this.currentValue = value;
      }
      this.$emit('value-change', this.currentValue);
    }
  },
};
</script>

<style lang="scss" scoped>
    .ea-input-number{
        ::v-deep {
            .vxe-input--number-prev.is--prev .vxe-input--number-prev-icon.vxe-icon--caret-top {
                display: block;
            }
            .vxe-input--number-next.is--next .vxe-input--number-next-icon.vxe-icon--caret-bottom {
                display: block;
            }
            .vxe-input--inner{
                height: calc(100% - 1px);
                border-radius: 2px;
            }
        }
    }

</style>
